//渲染用户名
const usernamein= document.querySelector('.username')
usernamein.innerHTML=localStorage.getItem('user')
//页面鉴权
authority()
//退出登录业务
const logoutbtn= document.querySelector('#logout')
logoutbtn.addEventListener('click', logout)
//获取学生统计数据并渲染
async function getData(){
    const {data:{groupData,overview,provinceData,salaryData,year}}= await axios.get('/dashboard')
    renderOverview(overview)
    renderYearSalary(year)
    renderSalary(salaryData)
    renderGroup(groupData)
    renderSalarytwo(salaryData)
    map(provinceData)
}
//1概览业务
function renderOverview(overview){
    Object.keys(overview).forEach((key)=>{
        document.querySelector(`.${key}`).innerHTML=overview[key]
      })  
}
//2薪资走势
function renderYearSalary(year){
    const myChart=echarts.init(document.querySelector('#line'))
    const option = {
        title:{
            text:'2024全学科薪资走势',
            textStyle: {
                fontSize:16
              },
              left:13,
              top:13
        },
        xAxis: {
          type: 'category',
          data: year.map(item=>item.month),
          axisLine: {
           lineStyle:{
             color:'#bdbec3',
             type:'dashed'
           }
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data:year.map(item=>item.salary) ,
            type: 'line',
            areaStyle: {
                color:{
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: '#7bc6fa' // 0% 处的颜色
                    }, {
                        offset: 1, color: '#ffffff' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                  }
            },
            smooth:true,
            symbolSize:8,
            lineStyle:{
                width: 6,
                color:{
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 0,
                    colorStops: [{
                        offset: 0, color: '#0a8eea' // 0% 处的颜色
                    }, {
                        offset: 1, color: '#4268f2' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                  }
              }
          },
        ],
         axisLine: {
            splitLine:{
             color:'#bdbec3',
           }
          }
      };
      myChart.setOption(option)
}
//3薪资分布
function renderSalary(salaryData){
 const myChart=echarts.init(document.querySelector('#salary'))
 const option = {
    title:{
      text:'班级薪资分布',
      top:10,
      left:10
    },
    tooltip: {
      trigger: 'item',
      data:['班级薪资分布']
    },
    legend: {
      bottom: '5%',
      left: 'center'
    },
    series: [
      {
        name: '班级薪资分布',
        type: 'pie',
        radius: ['55%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        labelLine: {
          show: false
        },
        data:salaryData.map(item=>{
            return {value:item.g_count+item.b_count,name:item.label}
        }),
        color:['#fda224','#5097ff','#3fceff','#35d79d']
      }
    ]
  };
  myChart.setOption(option)
}
//4分组数据
function renderGroup(groupData){
    function render4(groupData){
        const myChart=echarts.init(document.querySelector('#lines'))
    const option = {
        tooltip: {
          },
        xAxis: [
          {
            type: 'category',
            data: groupData.map(item=>item.name),
            axisLine: {
            lineStyle: {
              color:'#999',
              type: "dashed"
            }
          }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '期望薪资',
            type: 'bar',
            data: groupData.map(item=>item.hope_salary),
            color:{
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0, color: '#37d49c' // 0% 处的颜色
                }, {
                    offset: 1, color: '#d5f6ea' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
          },
          {
            name: '实际薪资',
            type: 'bar',
            data: groupData.map(item=>item.salary),
            color:{
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0, color: '#4ba0ee' // 0% 处的颜色
                }, {
                    offset: 1, color: '#d9ebfb' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
          }
        ]
      };
    myChart.setOption(option)
    }
    render4(groupData[1])
    const  btn_xss= document.querySelectorAll('.btn-xs')
    btn_xss.forEach((item,index)=>{
        item.addEventListener('click', function (e) {
            document.querySelector('.btn-blue').classList.remove('btn-blue')
            item.classList.add('btn-blue')
           render4(groupData[index+1])
        })
    })
}
//5男女薪资分布
function renderSalarytwo(salaryData){
  const myChart=echarts.init(document.querySelector('#gender'))
  const datas = [
    salaryData.map(item=>{
        return {name:item.label,value:item.b_count}
    }),
    salaryData.map(item=>{
        return {name:item.label,value:item.g_count}
    })
  ];
  const  option = {
    title: [{
      text: '男女薪资分布',
      left: 10,
      top:10
    },{
      text: '男',
      left: 'center',
      top:'45%',
      textStyle:{
        fontSize:14
      }
    },{
      text: '女',
      left: 'center',
      top:'90%',
      textStyle:{
        fontSize:14
      }
    }],
    tooltip:{},
    series: datas.map(function (data, idx) {
      return {
        type: 'pie',
        radius: [45, 65],
        top: idx*45+5+ '%',
        height: '50%',
        left: 'center',
        width: 280,
        label: {
          alignTo: 'edge',
          minMargin: 5,
          edgeDistance: 10,
          lineHeight: 15,
        },
        labelLine: {
          length: 15,
          length2: 0,
          maxSurfaceAngle: 80
        },
        data: data,
        color:['#fda224','#5097ff','#3abcfa','#34d39a']
      };
    })
  };
  myChart.setOption(option)
}
//6籍贯分布
function map(provinceData){
    console.log(provinceData);
    const myChart=echarts.init(document.querySelector('#map'))
    const data=[
      { name: '南海诸岛', value: 0 },
      { name: '北京', value: 0 },
      { name: '天津', value: 0 },
      { name: '上海', value: 0 },
      { name: '重庆', value: 0 },
      { name: '河北', value: 0 },
      { name: '河南', value: 0 },
      { name: '云南', value: 0 },
      { name: '辽宁', value: 0 },
      { name: '黑龙江', value: 0 },
      { name: '湖南', value: 0 },
      { name: '安徽', value: 0 },
      { name: '山东', value: 0 },
      { name: '新疆', value: 0 },
      { name: '江苏', value: 0 },
      { name: '浙江', value: 0 },
      { name: '江西', value: 0 },
      { name: '湖北', value: 0 },
      { name: '广西', value: 0 },
      { name: '甘肃', value: 0 },
      { name: '山西', value: 0 },
      { name: '内蒙古', value: 0 },
      { name: '陕西', value: 0 },
      { name: '吉林', value: 0 },
      { name: '福建', value: 0 },
      { name: '贵州', value: 0 },
      { name: '广东', value: 0 },
      { name: '青海', value: 0 },
      { name: '西藏', value: 0 },
      { name: '四川', value: 0 },
      { name: '宁夏', value: 0 },
      { name: '海南', value: 0 },
      { name: '台湾', value: 0 },
      { name: '香港', value: 0 },
      { name: '澳门', value: 0 },]
    data.forEach(ditem=>{
      provinceData.forEach(pitem=>{
        if(pitem.name.includes(ditem.name)){
          ditem.value+=pitem.value
        }
      })
    })
    const option = {
        title: {  //标题样式
            text: '籍贯分布',
            left:10,
            top:10,
            textStyle: {
                fontSize: 18,
            },
        },
        tooltip: {  //这里设置提示框
            trigger: 'item',  //数据项图形触发
            backgroundColor: "rgba(0,0,0,0.5)",  //提示框浮层的背景颜色。
            //字符串模板(地图): {a}（系列名称），{b}（区域名称），{c}（合并数值）,{d}（无）
            textStyle: {
                color:'white'
            },
        },
        visualMap: {//视觉映射组件
            top: 'center',
            left: 'left',
            min: 0,
            max: 6,
            text: ['6', '0'],
            realtime: false,  //拖拽时，是否实时更新
            calculable: true,  //是否显示拖拽用的手柄
            inRange: {
                color: ['#e4f0fd', '#0879f0']
            }
        },
        series: [
            {
                type: 'map',
                mapType: 'china',
                roam: false,//是否开启鼠标缩放和平移漫游
                itemStyle: {//地图区域的多边形 图形样式
                    normal: {//是图形在默认状态下的样式
                        label: {
                            show: true,//是否显示标签
                            textStyle: {
                                color: "black"
                            }
                        }
                    },
                    emphasis: {//是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
                        label: { show: true }
                    }
                },
                top: "3%",//组件距离容器的距离
                data:data   
            }
        ]
    };
    myChart.setOption(option)
}
//跳转绑定
const btn_square= document.querySelectorAll('.btn-square')
for(let i=0;i<2;i++){
    btn_square[i].addEventListener('click', function () {
        document.querySelector('.active').remove('active')
        btn_square[i].classList.add('active')
        if(i==0){
            location.href='./index.html'
        }else{
            location.href='./student.html'
        }
    })
}
getData()